<!-- 
  自定义指令的使用步骤
    1. 定义一个自定义指令
    2. 注册
    3. 使用

  定义一个自定义指令
    1. 定义一个包含有特殊选项的对象（特殊选项与Vue的生命周期钩子函数类似）
    2. 定义一个函数（该函数是对象写法的简写）

  注册
    1. 全局注册
      app.directive(name, 定义的指令)
    2. 局部注册
      配置组件的 directives 选项
      directives: {
        name: 定义的指令
      }
  
  使用
    通过 v-xxx 用在元素上即可。

 -->

<template>
  <div>
    <h2>自定义指令</h2>

    <!-- 
      Teleport 是传送门的组件，是Vue3新增的内置组件。
          通过设置 to 属性，可以将插槽内容传送到 to 的位置去。
     -->
    <!-- <Teleport to="body">
      <div class="box2" v-draggable></div>
    </Teleport> -->

    <div class="box" v-waterMarker="'版权所有'"></div>

    <hr />

    <div class="box" v-waterMarker="'张三'"></div>

    <button @click="count++">{{ count }}</button>
    <button @click="msg = '里斯'">{{ msg }}</button>

    <!-- 使用 focus 指令 -->
    <input v-focus type="text" />

    <hr />
    <Hello />
  </div>
</template>

<script>
// 引入 focus 指令
import focus from "@/directives/modules/focus";
// 引入 Hello 组件
import Hello from "./components/hello.vue";

export default {
  components: {
    Hello,
  },

  // 局部注册指令
  directives: {
    focus: focus,
  },

  data() {
    return {
      count: 1,
      msg: "张三",
    };
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 500px;
  height: 500px;
  background-color: green;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>
